<script setup>
import { computed, ref } from 'vue'
import { InitMenuItem } from '@/assets/tools/constructors.js'
import MenuItem from '@/components/commons/base/menu/MenuItem.vue';

const props = defineProps({
  menuItems: { type: Array, default: () => [] },
  isCollapsed: { type: Boolean, default: false },
})

const defaultMenuItems = [
  new InitMenuItem('mv-0', 'Account').initRoute('/test').setIconClass('i-flowbite-user-settings-outline'),
  new InitMenuItem('mv-1', 'Support').initRoute('/test').setIconClass('i-flowbite-question-circle-outline'),
  new InitMenuItem('mv-2', 'Settings').initRoute('/test').setIconClass('i-flowbite-cog-outline'),
  new InitMenuItem('mv-3', 'More').initRoute('/test').setIconClass('i-flowbite-bars-outline'),
]

const finalMenuItems = computed(() => {
  if (props.menuItems.length !== 0) return props.menuItems
  return defaultMenuItems
})

const collapsed = computed(() => {
  return props.isCollapsed
})

</script>

<template>
  <ul class="menu bg-base-200 rounded-box">
    <MenuItem v-for="item in finalMenuItems" :key="item.id" :id="item.id" v-bind="item" :is-collapsed="collapsed" />
  </ul>
  <!-- <ul class="menu bg-base-200 rounded-box w-56">
    <MenuItem name="Account" icon-class="i-flowbite-user-settings-outline"/>
    <MenuItem name="Support" icon-class="i-flowbite-question-circle-outline"/>
    <MenuItem name="Settings" icon-class="i-flowbite-adjustments-horizontal-outline"/>
  </ul> -->
</template>

<style scoped>

</style>